<template>
  <n-space
    vertical
    size="large"
  >
    <n-button
      @click="addNewOne()"
      type="primary"
      dashed
      >添加新看板</n-button
    >
    <!--    <template :key="surfaceSetting.taskBoardList.changeKey"></template>-->
    <template
      v-for="(data, index) in surfaceSetting.taskBoardList.taskBoardList"
      :key="index"
    >
      <n-collapse
        style="width: 100%"
        v-model:expanded-names="surfaceSetting.TaskBoardPanelExpandedNames"
      >
        <n-collapse-item
          :title="data.name"
          :name="index.toString()"
        >
          <single-task-board v-bind:index="index"></single-task-board>
        </n-collapse-item>
      </n-collapse>
      <!--      {{index}}-{{taskBoradData}}-->
      <!--      <n-divider />-->
    </template>
  </n-space>
</template>

<script lang="ts" setup>
import SingleTaskBoard from "@/components/operation/taskBoard/singleTaskBoard.vue";
import { TaskBoardData, TaskBoardList } from "@model/TaskBoardList";
import { SurfaceSetting } from "@model/surfaceSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { NButton, NCollapse, NCollapseItem, NSpace } from "naive-ui";

// 全局数据
const { getSurfaceSetting } = UseSurfaceSetting(pinia);
const surfaceSetting: SurfaceSetting = getSurfaceSetting();
// console.log(surfaceSetting.taskBoardList.taskBoardList)
// 当前页面数据
const addNewOne = () => {
  TaskBoardList.addTaskBoardData(surfaceSetting.taskBoardList, new TaskBoardData("测试", []));
};
</script>
